import React, {Component} from "react";
import {Form, Input, Button, Checkbox, Row,Card} from 'antd';
import {UserOutlined, LockOutlined, InsertRowLeftOutlined} from '@ant-design/icons';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux'
import CFont from "../pages/model/styleClass";
import {login} from "../api/Security";
import imgURL from './../images/login_title2.png';
import { getToken, setToken, removeToken } from '../utils/auth'
import {
    PieChartOutlined
} from '@ant-design/icons';
import http from "../utils/http";
// const NormalLoginForm = () => {
//     const onFinish = (values) => {
//         console.log('Received values of form: ', values);
//     };
//
//     return (
//         <Form
//             name="normal_login"
//             className="login-form"
//             initialValues={{
//                 remember: true,
//             }}
//             onFinish={onFinish}
//         >
//             <Form.Item
//                 name="username"
//                 rules={[
//                     {
//                         required: true,
//                         message: 'Please input your Username!',
//                     },
//                 ]}
//             >
//                 <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
//             </Form.Item>
//             <Form.Item
//                 name="password"
//                 rules={[
//                     {
//                         required: true,
//                         message: 'Please input your Password!',
//                     },
//                 ]}
//             >
//                 <Input
//                     prefix={<LockOutlined className="site-form-item-icon" />}
//                     type="password"
//                     placeholder="Password"
//                 />
//             </Form.Item>
//             <Form.Item>
//                 <Form.Item name="remember" valuePropName="checked" noStyle>
//                     <Checkbox>Remember me</Checkbox>
//                 </Form.Item>
//
//                 <a className="login-form-forgot" href="">
//                     Forgot password
//                 </a>
//             </Form.Item>
//
//             <Form.Item>
//                 <Button type="primary" htmlType="submit" className="login-form-button">
//                     Log in
//                 </Button>
//                 Or <a href="">register now!</a>
//             </Form.Item>
//         </Form>
//     );
// };
//
// export {NormalLoginForm};


class NormalLoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            email: "",
            password: "",
            passwordConfilmation: "",
            errors: {},
            isLoading: false
        };
    }

    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    // onSubmit = (e) => {
    //     e.preventDefault();
    //     this.setState({errors:{},isLoading:true})
    //     this.props.signupActions.userSignupRequest(this.state).then(
    //         ()=>{
    //             this.props.flashActions.addFlashMessage({
    //                 type:"success",
    //                 text:"注册成功！欢迎你的加入！"
    //             })
    //             this.props.history.push('/')
    //         },
    //         ({response}) => {
    //             this.setState({
    //                 errors:response.data,
    //                 isLoading:false
    //             })
    //         }
    //     )
    // }
    onFinish = (values) => {
        console.log('Received values of form: ', values);
        //e.preventDefault();
        this.setState({errors:{},isLoading:true})
        let r=this.props.login_prop(values.username, values.password);
        r.then(
            res => {
                //resolve (res);
                console.log("test!!!!:"+res);
                if(res==1){   //正常登录成功
                   // this.history.push('/main')  //没搞清这里为什么不识别history
                }else if(res==-1){  //用户名 密码错误
                    this.setState({
                        errors:-1,
                        isLoading:false
                    })
                    alert('用户名或者密码错误！')
                }else if(res==-3){
                    this.setState({
                        errors:-3,
                        isLoading:false
                    })
                   alert('后端服务中断！')
                }


            },error => {
                console.log("error!!!!:"+error);
            }

        );
    }


    ;

    render() {
        const {errors, isLoading} = this.state;
        return (
           // <Card>

                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                >


                    {/*<Spin spinning={this.state.loading}>*/}

                    {/*</Spin>*/}



                    <Form.Item
                        name="title"
                    >

                        <Row>
                            <PieChartOutlined style={{fontSize: "30px", color: "blue"}}/>  <p
                            style={{color: "black", fontSize: "25px"}}>数据工具系统</p>
                        </Row>
                    </Form.Item>

                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Username!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Password!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            Forgot password
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="dashed" htmlType="submit" className="login-form-button"
                                disabled={isLoading}
                        >
                            登 录
                        </Button>
                        Or <a href="">register now!</a>
                    </Form.Item>
                </Form>
           // </Card>
        );
    }
}

// //将store.dispatch方法挂载到props上
const mapDispatchToProps = (dispatch) => {
    return {
        login_prop(loginName, password) {
            let r= login(loginName, password).then(
                (res) => {
                    console.log("get article response:", res);
                    if (res.code === "200") {
                        let _token = res.data.token;
                        if (_token != null && _token.length > 0) {  //返回token
                            const action = {
                                type: 'login_token',
                                login_token: _token
                            }
                            //存放到cookie
                            setToken(_token)
                            dispatch(action)
                            //继续跳转......
                            this.history.push('/main')
                            return;
                        }
                        else{
                            console.log("get token failed!");
                            return -2;
                        }
                    }else{   //登录失败 用户名 密码错误 主要走这个
                        return -1;
                    }
                },
                (error) => {
                    console.log("get response failed!");
                    return -3;
                }
            );
            return r;
        }
    }
}

//export default NormalLoginForm;
export default withRouter(connect(null, mapDispatchToProps)(NormalLoginForm))



